<template>
    <div>
        <div style="display: flex;vertical-align: middle;align-items: center;width:100%;" >
            <span v-if="item.children && item.children.length > 0" @mousedown="(events)=>{events.stopPropagation();events.preventDefault();;expand(item)}" style="width: 20px;">
                <svg width="10px" :class="'expandArray ' + (item.__expand ? 'expandArrayExpanded' : '')"  height="10px" >    
                    <polygon points="2,0 2,10 8,5" translate="0 10" fill="var(--primary-color) black" stroke-width="0"/>
                </svg>
            </span>
            <div v-else style="display: inline-block; width:20px;"></div>
            <span style="width: calc(100% - 20px);" class="item" @click="clickedItem(item)">
                <CheckBox v-if="showCheckBox" :value.sync="item.__checked" @checked="checkItem(item)" :label="item.name" style="width: 100%;" :disable="disable(item) ||(onlyCheckLeaf && item.children && item.children.length > 0)"></CheckBox>
                <span style="  white-space:nowrap;" v-else>{{item[labelAttr]}}</span>
            </span>
        </div>

        <div v-show="item.__expand" v-for="child in item[childAttr]" :key="child[idAttr]">
            <tree-view-item :class="[showCheckBox?'child-item':'child-item-nocheck']" :idAttr="idAttr" :labelAttr="labelAttr" :childAttr="childAttr" @checkedChild="checkedChild" @clickedItem = "clickedItem" :item="child" @expand="expandChild(child)" :onlyCheckLeaf="onlyCheckLeaf" :disable="disable" :showCheckBox="showCheckBox"></tree-view-item>
        </div>
    </div>

</template>

<script>
import Vue from 'vue';
import CheckBox from '../CheckBox/CheckBox.vue';
export default {
    name: 'tree-view-item',
    components: {
        CheckBox
    },
    props: {
        item: {
            type: Object,
            required: true
        },
        idAttr:{
            type: String,
            default: 'id'
        },
        labelAttr:{
            type: String,
            default: 'label'
        },
        childAttr:{
            type: String,
            default: 'child'
        },
        parentAttr:{
            type: String,
            default: 'parent'
        },
        parentTarget:{
            type: String,
            default: 'id'
        },
        showCheckBox:{
            type: Boolean,
            default: true
        },
        onlyCheckLeaf:{
            type: Boolean,
            default: false
        },
        disable:{
            type: Function,
            default: ()=>{return true}
        }
    },
    mounted(){
    },
    methods: {
        expand(item){
            console.log('expand')
            this.$emit('expand', item)
        },
        expandChild(child){
            console.log('expandChild')

            Vue.set(child,"__expand",!child.__expand);
        },
        checkItem(item){
            console.log('checkItem')
            this.$emit('checkedChild', item);
        },
        checkedChild(checkedItem){
            console.log('checkedChild')
            this.$emit('checkedChild', checkedItem);
        },
        clickedItem(item)
        {
            console.log("clickedItem",item)
            this.$emit('clickedItem', item)
        }
    }
}
</script>
<style scoped>
*{
    --primary-color: var(--theme-primary-color, #409eff);
    --highlight-color: var(--theme-highlight-color, #93c9ff);
}
.item:hover{
    background-color: var(--highlight-color);
}
.expandArray{
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
    margin-left: 5px;
    /* 设置过渡属性，对transform属性的变化应用0.5秒的缓入缓出动画 */
}
.expandArrayExpanded{
    transform: rotate(90deg);
}
.child-item{
    margin-left: 20px;
}
.child-item-nocheck{
    margin-left: 10px;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 0.2s ease;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateX(10px);
}
</style>